<!doctype html>
<html lang="en" class="h-100">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/cover/">
    <link rel="stylesheet" href="../static/css/flipclock.css">
    <link rel="stylesheet" href="../static/css/style.css">
    <link href="https://getbootstrap.com/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
      　
　　*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins',sans-serif
}



section h2{
    font-size: 10em;
    color: #333;
}

section span{
    position: absolute;
    bottom: 50px;
    background: transparent;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
    animation: animate 4s linear infinite;
}

section span:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scale(0.25) translate(-70%, -70%);
    background: radial-gradient(#fff, transparent);
    border-radius: 50%;
}

@keyframes animate{
    0%{
        transform: translateY(0%);
        opacity: 1;
    }
    99%{
        opacity: 1;
    }
    100%{
        transform: translateY(-1200%);
        opacity: 0;
    }
}


    </style>

    
    <!-- Custom styles for this template -->
    <link href="cover.css" rel="stylesheet">
  </head>
  <body class="d-flex h-100 text-center text-white bg-dark">
    
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
  <header class="mb-auto">
    <div>
      <h3 class="float-md-start mb-0">WEB数据挖掘</h3>

    </div>

  </header>

  <main class="px-3"><section>

    </section>
    <script type="text/javascript">
        function createBubble(){
            const section = document.querySelector('section')
            const createElement = document.createElement('span')
            var size = Math.random() * 60;

            createElement.style.width = size + 'px';
            createElement.style.height = size + 'px';
            createElement.style.left = Math.random() * innerWidth + 'px';
            section.appendChild(createElement);

            setTimeout(() => {
                createElement.remove()
            },4000)
        }

        setInterval(createBubble, 50);
    </script>
    <h1>Final Project</h1>
    <p class="lead">前程无忧数据挖掘可视化分析系统</p>
      <p class="lead">作者：庄焕敏</p>
      <p class="lead">指导教师：许智超老师</p>
      <p class="lead">本项目参考链接如下：</p>
      <a href="https://echarts.apache.org/examples/zh/index.html#chart-type-line">Echarts</a>
      <a href="https://dormousehole.readthedocs.io/en/latest/quickstart.html#id10">Flask文档</a>
      <a href="https://www.w3school.com.cn/html/index.asp">HTML文档</a>
      <a href="https://palletsprojects.com/p/jinja/">jinja2</a>
    <p class="lead">
        
            <a href="/index" class="btn btn-primary my-2">进入交互式页面</a>
            
    </p>

  </main>

  <footer class="mt-auto text-white-50">
    <p></p>
  </footer>
</div>
<div class="clock"></div>

	<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="../static/js/flipclock.js"></script>
	<script type="text/javascript">
		var clock = $('.clock').FlipClock({
			clockFace: 'TwelveHourClock'
		});
	</script>

    
  </body>
</html>

